<template>
  <div>
    <div class="Intro-synopsis">
      <div>
        <ST :title="stname.synopsis"></ST>
      </div>
      <div class="synopsis">
        <p>
          {{introinfo.filmInfo}}
        </p>
      </div>
    </div>
    <div class="Intro-cast">
      <div>
        <ST :title="stname.cast"></ST>
      </div>
      <div class="cast-wrap">
        <div class="cast-director">
          <div class="cast-item-type">导演</div>
          <div class="cast-item-img">
            <img
              src="https://p0.meituan.net/movie/5e0811384a9528e6048dfac492a95429207200.jpg@128w_170h_1e_1c"
              alt=""
            />
          </div>
          <div class="cast-item-name">张若兰</div>
        </div>

        <div class="cast-actor">
          <div class="cast-item-type">演员</div>
          <div class="cast-actor-set">
            <div class="cast-item">
              <div class="cast-item-img">
                <img
                  src="https://p0.meituan.net/movie/5e0811384a9528e6048dfac492a95429207200.jpg@128w_170h_1e_1c"
                  alt=""
                />
              </div>
              <div class="cast-item-name">张若兰</div>
              <div class="cast-item-actname">饰：哈哈</div>
            </div>
            <div class="cast-item">
              <div class="cast-item-img">
                <img
                  src="https://p0.meituan.net/movie/5e0811384a9528e6048dfac492a95429207200.jpg@128w_170h_1e_1c"
                  alt=""
                />
              </div>
              <div class="cast-item-name">张若兰</div>
              <div class="cast-item-actname">饰：哈哈</div>
            </div>
            <div class="cast-item">
              <div class="cast-item-img">
                <img
                  src="https://p0.meituan.net/movie/5e0811384a9528e6048dfac492a95429207200.jpg@128w_170h_1e_1c"
                  alt=""
                />
              </div>
              <div class="cast-item-name">张若兰</div>
              <div class="cast-item-actname">饰：哈哈</div>
            </div>
            <div class="cast-item">
              <div class="cast-item-img">
                <img
                  src="https://p0.meituan.net/movie/5e0811384a9528e6048dfac492a95429207200.jpg@128w_170h_1e_1c"
                  alt=""
                />
              </div>
              <div class="cast-item-name">张若兰</div>
              <div class="cast-item-actname">饰：哈哈</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Intro-pics">
      <div>
        <ST :title="stname.pics"></ST>
      </div>
      <div class="pics-wrap">
        <div>
          <img
            class="pics1"
            src="https://p1.meituan.net/movie/80a0afab60ba5bc548a0c606635fef291479960.jpg@465w_258h_1e_1c"
            alt=""
          />
        </div>
        <div class="pics2">
          <img
            src="https://p1.meituan.net/movie/87b2e15c3f064b53f1ec82d85bc692201501067.jpg@126w_126h_1e_1c"
            alt=""
          />
          <img
            src="https://p1.meituan.net/movie/87b2e15c3f064b53f1ec82d85bc692201501067.jpg@126w_126h_1e_1c"
            alt=""
          />
        </div>
        <div class="pics2">
          <img
            src="https://p1.meituan.net/movie/87b2e15c3f064b53f1ec82d85bc692201501067.jpg@126w_126h_1e_1c"
            alt=""
          />
          <img
            src="https://p1.meituan.net/movie/87b2e15c3f064b53f1ec82d85bc692201501067.jpg@126w_126h_1e_1c"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="Intro-comment">
      <div class="Intro-comment-title">
        <ST :title="stname.comment"></ST>
        <div class="writeComment" @click="onDialog">写短评</div>
      </div>
      <div>
        <Comment></Comment>
        <Comment></Comment>
        <Comment></Comment>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.synopsis {
  font-size: 14px;
  line-height: 26px;
  color: #333;
}
.cast-wrap {
  display: flex;
  flex-wrap: nowrap;
  .cast-director {
    width: 128px;
    height: 263px;
    margin-right: 30px;
  }
  .cast-actor-set {
    display: flex;
    width: 572px;
    justify-content: space-between;
    .cast-item {
      text-align: center;
    }
  }
  .cast-item-type {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
  }
  .cast-item-img {
    width: 128px;
    height: 170px;
  }
  .cast-item-name {
    font-size: 16px;
    margin-top: 5px;
  }
  .cast-item-actname {
    font-size: 14px;
    color: #666;
  }
}
.pics-wrap {
  width: 730px;
  height: 258px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  img {
    display: block;
  }
  .pics1 {
    width: 465px;
    height: 258px;
  }
  .pics2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 126px;
      height: 126px;
    }
  }
}
.Intro-comment-title{
position: relative;
.writeComment {
  cursor: pointer;
  position: absolute;
  top: -50%;
  right: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  border: 1px solid #ef4238;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  color: #ef4238;
}
}
</style>
<script>
import ST from "./SmallTitle";
import Comment from "./Comment";
import bus from '../../bus/index'
export default {
  data() {
    return {
      stname: {
        synopsis: "剧情简介",
        cast: "演职人员",
        pics: "图集",
        comment: "热门短评",
      },
    };
  },

  methods: {
    onDialog() {
      bus.$emit('changedialog')
    }
  },
   props: {
      introinfo: Object,
      required: true
    },
  components: {
    ST,
    Comment,
  },
};
</script>
